<Page [ngClass]="'gesture-password'" [title]="'Gesture Password'" [subTitle]="'一个基于canvas的手势解锁组件'" [spacing]="false">
  <p>current password: {{ pwd }}</p>
  <weui-button weui-mini [ngClass]="{ 'text-success': type === 'check' }" (click)="type = 'check'">check</weui-button>
  <weui-button weui-mini [ngClass]="{ 'text-success': type === 'recorder' }" (click)="type = 'recorder'">recorder </weui-button>
  <weui-button weui-mini (click)="onChangeOptions()">change option</weui-button>
  <weui-button weui-mini (click)="switchState = !switchState">{{ switchState ? 'hide' : 'show' }}</weui-button>

  <gesture-password
    *ngIf="switchState"
    style="height: 350px;"
    [(ngModel)]="pwd"
    type="check"
    [options]="options || { bgColor: 'var(--weui-BG-1)' }"
    (error)="onError($event)"
    (checked)="onChecked($event)"
    (beforeRepeat)="onBeforeRepeat($event)"
    (afterRepeat)="onAfterRepeat($event)"
  ></gesture-password>
</Page>
